<template>
		<div class="routinelogerror">
			<el-card>
				<template #header>
					<div class="card-header clearfix">
						<span>操作日志</span>
						<div class="header-right">
							<el-button type="primary" v-if="isAuthBtn('add')" ><i class="fa fa-send"></i>Btn</el-button>
						</div>
					</div>
				</template>
				<div class="errorData">
					<div class="errorData-harder">
						<div >
							<el-select
								v-model="state.operatortype"
								:multiple="false"
								placeholder="Select"
								style="width: 100px"
							>
							<el-option
							  v-for="item,index in state.pageInfo.operatortypeList"
							  :key="index"
							  :label="item.name"
							  :value="item.key"
							/>
							</el-select>
							<el-select
								v-model="state.errortype"
								:multiple="false"
								placeholder="Select"
								style="width: 100px;margin-left:10px;"
							>
							<el-option
							  v-for="item,index in state.pageInfo.businesstypeList"
							  :key="index"
							  :label="item.name"
							  :value="item.key"
							/>
							</el-select>
							<el-date-picker
							style="vertical-align: bottom;margin-left:10px;"
							v-model="state.selectTime"
							:shortcuts="shortcuts"
							type="daterange"
							range-separator="To"
							value-format="YYYY-MM-DD"
							start-placeholder="开始时间"
							end-placeholder="结束时间"
							/>
							<el-input v-model="state.key" clearable placeholder="搜索关键字" style="width:180px; margin-left:10px;"></el-input>
							<el-button style="margin-left:10px;" @click="chaxunBtn">查找</el-button>
						</div>
						<div style="margin: 10px 0;">
							<el-button type="primary" size="default" @click="state.uid='';getLogList();" v-if="state.uid">清除用户条件</el-button>
							<el-button type="primary" size="default" @click="state.logtype='';getLogList();" v-if="state.logtype">清除操作类型</el-button>
							<el-button type="primary" size="default" @click="state.ip='';getLogList();" v-if="state.ip">清除操作IP</el-button>
						</div>
					</div>
					<div>
						<Table
							ref="tableRef"
							v-bind="state.tableData"
							class="table-demo"
							@pageChange="onTablePageChange"
							@sortHeader="onSortHeader"
							@columnCzBtn="onColumnCzBtn"
							@columnClick="onColumnClick"
						/>
					</div>
				</div>
			</el-card>
			<el-dialog v-model="state.detailShow">
				<div>{{state.details}}</div>
			</el-dialog>
		</div>
	</template>
	
	<script lang="ts" setup>
	import { toRefs,ref, reactive,onMounted, defineComponent,defineAsyncComponent } from 'vue';
	import { useRouter } from 'vue-router'
	import { ElNotification, ElMessage ,ElMessageBox} from 'element-plus'
	import { pageInfo } from '/@/api';
	import { logApi } from '/@/api/log';
	import commonFunction from '/@/utils/commonFunction';//复制
	const { copyText } = commonFunction();
	
	// 引入组件
	const Table = defineAsyncComponent(() => import('/@/components/table/index.vue'));
	// 定义变量内容
	const tableRef = ref<RefType>();

	const router = useRouter();
	
	const state = reactive({
		roleBtn:router.currentRoute.value.meta.roleBtn,
		dataList:[],
		tbloading:true,
		pages: {
			isAll: false,
			pageCount: 0,
			pageSize: 10,
			recordCount: 0,
			pno: 1
		},
		pageInfo:{
			tbhdList:[],
			logtypeList:[],
			operatortypeList:[],
			businesstypeList:[],
		},
		uid:'',
		ip:'',
		logtype:'',
		key:'',
		minDate:'',
		maxDate:'',
		operatortype:"",
		errortype:"",
		selectTime:[],
		detailShow:false,
		details:"",
		tableData:{
			data: [],// 列表数据（必传）
			// 表头内容（必传，注意格式）
			header: [],
			// 配置项（必传）
			config: {
				total: 0, // 列表总数
				loading: true, // loading 加载
				isBorder: false, // 是否显示表格边框
				isSerialNo: false, // 是否显示表格序号
				isSelection: true, // 是否显示表格多选
				isExcel: true, // 是否可以导出
				excelName:"错误日志列表"
			},
			btn:[]
		},
		czBtn:[]
	});
	const shortcuts = [
	  {
		text: '最近一周',
		value: () => {
		  const end = new Date()
		  const start = new Date()
		  start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
		  return [start, end]
		},
	  },
	  {
		text: '最近一个月',
		value: () => {
		  const end = new Date()
		  const start = new Date()
		  start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
		  return [start, end]
		},
	  },
	  {
		text: '最近三个月',
		value: () => {
		  const end = new Date()
		  const start = new Date()
		  start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
		  return [start, end]
		},
	  },
	]
	
	const chaxunBtn=()=>{
		//  console.log(state.selectTime)
		if(state.selectTime){
			state.minDate=state.selectTime[0];
			state.maxDate=state.selectTime[1];
			state.tableData.config.excelName="错误日志"+state.minDate+'~'+state.maxDate
		}else{
			state.minDate="";
			state.maxDate="";
		}
		getLogList();
	}
	
	// 表单点击回调
	const onColumnClick = (row: EmptyObjectType) => {
		if(row.key=='sort'){
			state.orderBy={
				order:row.data.order,
				prop:row.data.prop
			}
			getRoleList();
		}
		let item=row.item,data=row.data;
		if(item.type=='link'||item.type=='user'){
			if(item.prop=='user'){
				state.uid=data.uid;
				getLogList();
			}
			if(item.prop=='log_type'){
				state.logtype=data.log_type;
				getLogList();
			}
			if(item.prop=='log_ip'){
				state.ip=data.log_ip;
				getLogList();
			}
		}
		// getTableData();
	};
	// 表单操作回调
	const onColumnCzBtn = (row: EmptyObjectType) => {
		let type=row.key;
		let item=row.data;
	};
	// 分页改变时回调
	const onTablePageChange = (page: TableDemoPageType) => {
		state.pages.pageSize=page.pageSize;
		getLogList(page.pno);
	};
	// 拖动显示列排序回调
	const onSortHeader = (data: TableHeaderType[]) => {
		state.tableData.header = data;
	};
	// 获取页面前置
	const getpageInfo=()=>{
		pageInfo('log',{path:'error'}).then(res=>{
			state.pageInfo.tbhdList=res.tbhdList;
			state.pageInfo.logtypeList=res.logtypeList;
			state.pageInfo.operatortypeList=res.operatortypeList;
			state.pageInfo.businesstypeList=res.businesstypeList;
			state.tableData.header=res.tbhdList;
			let btn=[];
			for(let p of state.czBtn){
				if(isAuthBtn(p)){
					btn.push(p);
				}
			}
			state.tableData.btn=btn;
			getLogList();
		})
	}
	// 获取操作日志信息
	const getLogList=(pno)=>{
		state.tableData.config.loading=true;
		if(!pno){
			pno=1;
		}
		let dt={
			pages:{
				pno:pno,
				pageSize:state.pages.pageSize
			},
			data:{
				uid:state.uid,
				ip:state.ip,
				log_type:state.logtype,
				key:state.key,
				minDate:state.minDate,
				maxDate:state.maxDate,
				operator_type:state.operatortype,
				error_type:state.errortype,
			}
		}
		logApi("errorLog",dt).then(res=>{
			//  console.log(res)
			state.dataList=res.list;
			state.pages=res.pages;
			state.tbloading=false;
			state.tableData.data=res.list;
			state.tableData.config.total=res.pages.recordCount;
			state.tableData.config.loading = false;
		})
	}
	
	// 权限判断
	const isAuthBtn = (e) => {
		let auth=false;
		if(e){
			for(let p of state.roleBtn){
				if(p==e){
					auth=true;
				}
			}
		}
		return auth;
	};
	// 跳转
	const tourl = (e) => {
		router.push(e);
	};
	
	onMounted(()=>{
		  // 获取当前路由实例参数
		//   //  console.dir(router.currentRoute.value.query.id);
		  //  console.dir(router.currentRoute.value.meta.roleBtn);
		  if(!isAuthBtn('index')){
			  router.push('/401');
		  }else{
			  //操作函数
			  getpageInfo();
		  }
	})
	</script>
	
	<style scoped lang="scss">
		.routinelogerror{
			padding:5px;
		}
	</style>
	